import "./index.less";
import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
import { PhoneFill } from "antd-mobile-icons";
import Listmeta from "./components/listmeta";
import MapComponent from "@/components/MapComponent";
import { PageHeader } from "@/components";

export default function GuideLocation() {
  const navigate = useNavigate();
  const location = useLocation();
  const [focused, setFocused] = useState(false);
  const [likeKey, setLikeKey] = useState<string | number>();
  const [pointData, setPointData] = useState<object>();
  const [latLng, setLatLng] = useState([]);

  useEffect(() => {
    const bubbleDiv = document.getElementById("GuideLocation_content_bubble");
    bubbleDiv.addEventListener("focus", () => setFocused(true));
    bubbleDiv.addEventListener("blur", () => setFocused(false));
  }, []);
  useEffect(() => {
    setLikeKey(location?.state?.type);
    setPointData(location?.state?.data);
    setLatLng(location?.state?.latlng);
  }, []);

  return (
    <div className="GuideLocation_contarnier">
      <div className="header-bg"></div>
      <PageHeader
        title="社区云导览"
        goback={() => {
          if (likeKey === "branch") {
            navigate(`/lifeCircle/branch`);
          } else {
            navigate(`/lifeCircle/guide/searchpage`, {
              state: { type: likeKey, latlng: latLng },
            });
          }
        }}
      />

      <div className="GuideLocation_content">
        {/* 地图 */}
        <div className="Guide_content_map">
          <MapComponent />
        </div>

        {/* 面板 */}
        <div className="GuideLocation_content_panel">
          <Listmeta data={pointData} key={`gsc_list_${0}`} arrive={true} />
        </div>

        {/* 悬浮气泡 */}
        <div
          className="GuideLocation_content_bubble"
          id="GuideLocation_content_bubble"
          tabIndex={1}
        >
          <div className="gcb_left">
            <img src="/images/lifecircle/gridp.png" alt="" />
          </div>
          <div className="gcb_right">
            <div>孔毅</div>
            <div>{focused ? "中桥街道解放社区 - 第一网格" : "网格员"}</div>
          </div>
          {focused && (
            <div className="gcb_phone">
              <PhoneFill
                color="#ffffff"
                onClick={() => {
                  console.log("拨号");
                }}
              />
            </div>
          )}
        </div>
      </div>
    </div>
  );
}
